<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>微信应用服务管理平台</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/login.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/swiper.min.css"/>
</head>
<style type="text/css">
    .swiper-container {
        width: 100%;
        height: 100%;
    }

    input {
        background-color: #fff;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        width: 100%;
        height: 100%;
    }
</style>
<body style=" position: relative">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background:url(../../images/1.png) center no-repeat;background-size:100% auto"></div>
        <div class="swiper-slide" style="background:url(../../images/2.png) center no-repeat;background-size:100% auto"></div>
        <div class="swiper-slide" style="background:url(../../images/3.png) center no-repeat;background-size:100% auto"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<div class="license-ctn" style="display:none;">
    <div class="license-ctn-nei">
        <div class="license-ctn-tc">
            <div class="closelic"><img src="../../images/close-license.jpg"></div>
            <img src="../../images/licensed.png">
            <h1>系统未配置license或者license已过期，</h1>
            <h2>请联系管理员及时处理，敬请谅解！</h2>
        </div>
    </div>
</div>
<div class="contant">
    <div class="out-contmain">
        <div class="contmain">
            <div class="contmian-left">
                <h1>微信应用服务管理平台</h1>
                <h2>WECHAT APPLICATION SERVICE MANAGEMENT PLATFORM</h2>
                <div class="bot-line">
                    <div class="bot-line-top"></div>
                    <div class="mintext-left">
                        <span class="col1">科技</span>
                        <span class="col2">定位</span>
                        <span class="col3">服务</span>
                        <span class="col4">理念</span>
                        <br/>
                        <div class="samaltxt">掌握微生活，指引微信传播新动向。<br>
                            聚微信营销新策略，创沟通营销核心科技。
                        </div>
                    </div>
                </div>
            </div>
            <div class="contmian-right">
                <div class="newlogin-ctn">
                    <div class="newlogin-nei-ctn">
                        <div class="login-nav">
                            <ul>
                                <li class="checked">密码登录</li>
                                <li>账号注册</li>
                            </ul>
                        </div>
                        <div style="clear: both"></div>
                        <form class="layui-form" autocomplete="off" style="margin-top:50px;" id="form1">
                            <div class="loginline login-input-form">
                                <input type="text" name="loginName" placeholder="账号" lay-verify="loginName" autocomplete="off" class="layui-input" />
                            </div>
                            <div class="loginline login-input-form">
                                <input type="password" name="password" placeholder="密码" lay-verify="password" autocomplete="off" class="layui-input"/>
                            </div>
                            <div id="slider2" class="slider" style="width:312px;margin:0 auto 20px auto;"></div>
                            <button lay-submit lay-filter="login" style="height:45px; line-height:45px;width:calc(100% + 2px);border-radius:25px;margin-top:30px;">
                                登&nbsp;&nbsp;录
                            </button>
                        </form>
                        <form class="layui-form" autocomplete="off" style="margin-top:10px;display:none;" id="form2">
                            <div class="registere-line">
                                <input class="wxyy-input" type="text" placeholder="请输入您的注册账号">
                            </div>
                            <div class="registere-line">
                                <input class="wxyy-input" type="text" placeholder="请输入您的密码">
                            </div>
                            <div class="registere-line">
                                <input class="wxyy-input" type="text" placeholder="请再确认一遍密码">
                            </div>
                            <div class="registere-line">
                                <input class="wxyy-input" type="text" placeholder="请输入您的手机号">
                            </div>
                            <div class="registere-line">
                                <input class="yzm-input" type="text" placeholder="请输入您的手机号">
                                <button type="button" class="yzmbtn">获取验证码</button>
                            </div>
                            <button lay-submit lay-filter="login" style="height:45px; line-height:45px;width:calc(100% + 2px);border-radius:25px;margin-top:30px;">
                                登录
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${s.base}/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/jquery.slider.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        $(".closelic").click(function () {
            $(".license-ctn").hide();
        });
        $(".login-nav ul li").click(function(){
            $(".login-nav ul li").removeClass("checked");
            $(this).addClass("checked");
            var index=$(this).index();
            if (index==0){
                $("#form1").show();
                $("#form2").hide();
            }else {
                $("#form1").hide();
                $("#form2").show();
            }
        })
        $(".registere-line input").focus(function(){
            debugger;
            $(".registere-line input").parent().find(".inputfocus").remove();
            $(this).parent().append('<div class="inputfocus"></div>');
            $(".inputfocus").animate({width:'100%'});
        })
        // 点击获取验证码操作
        $('.yzmbtn').click(function() {
            let count = 60;
            const countDown = setInterval(() => {
                if (count === 0) {
                    $('.yzmbtn').text('重新发送').removeAttr('disabled');
                    clearInterval(countDown);
                } else {
                    $('.yzmbtn').attr('disabled', true);

                    $('.yzmbtn').text(count + '秒后重新获取');
                }
                count--;
            }, 1000);
        })


    });

    //背景轮播图
    new Swiper('.swiper-container', {
        direction: 'vertical',
        autoplay: true,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        }
    });

    //滑块验证
    var sliderResult = false;
    $("#slider2").slider({
        width: 312, // width
        height: 40, // height
        sliderBg: "rgba(134, 134, 131,0.4)", // 滑块背景颜色
        color: "#fff", // 文字颜色
        fontSize: 14, // 文字大小
        bgColor: "#1fdfc2", // 背景颜色
        textMsg: "按住滑块，拖拽验证", // 提示文字
        successMsg: "验证通过了哦", // 验证成功提示文字
        successColor: "#fff", // 滑块验证成功提示文字颜色
        time: 400, // 返回时间
        callback: function (result) { // 回调函数，true(成功),false(失败)
            sliderResult = result;
        }
    });
    $("#slider3").slider({
        width: 312, // width
        height: 40, // height
        sliderBg: "rgba(134, 134, 131,0.4)", // 滑块背景颜色
        color: "#fff", // 文字颜色
        fontSize: 14, // 文字大小
        bgColor: "#1fdfc2", // 背景颜色
        textMsg: "按住滑块，拖拽验证", // 提示文字
        successMsg: "验证通过了哦", // 验证成功提示文字
        successColor: "#fff", // 滑块验证成功提示文字颜色
        time: 400, // 返回时间
        callback: function (result) { // 回调函数，true(成功),false(失败)
            sliderResult = result;
        }
    });

    layui.use(['jquery', 'form', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            loginName: function (value) {
                if (isBlank(value)) {
                    return '请输入账号';
                }
            },
            password: function (value) {
                if (isBlank(value)) {
                    return '请输入密码';
                }
                var reg = /^(.+){6,12}$/;
                if (!reg.test(value)) {
                    return '密码必须6到12位';
                }
            }
        });

        //监听提交
        form.on('submit(login)', function (data) {
            if (!sliderResult) {
                layer.msg("请先通过滑块验证");
                return false;
            }
            $.ajax({
                url: "/webLogin",
                type: 'POST',
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    if (data.code === 0) {
                        if (data.data === '1') {
                            location.href = "/index";
                        } else if (data.data === '2') {
                            location.href = "/web/myIndex";
                        }
                    } else {
                        layer.open({
                            type: 1
                            , offset: "c"
                            , id: 'layerDemo1' //防止重复弹出
                            , content: '<div style="padding: 20px 100px;">' + data.msg + '</div>'
                            , btn: '确定'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();
                            }
                        });
                    }
                },
                error: function () {
                    layer.msg("登录异常，请联系系统管理员");
                }
            });
            return false;
        });
    });
</script>
</body>
</html>